/**
*@description CRM运营》回柜
*@author daycool
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import BackChart from '../components/CRM/BackChart';
import MyRangePicker from '../components/CRM/MyRangePicker';

import moment from 'moment';
import styles from './HomePage.less';
import {Card, Icon, Tooltip, Table, Row, Col, Button, DatePicker} from 'antd';
import toExcel from '../utils/toExcel';
import downImg from '../utils/downImg';

const {RangePicker,MonthPicker} = DatePicker;
import utils from '../utils/utils';
const {startDate, endDate} = utils.getDefaultDateRange();
const dateFormat = 'YYYY-MM';
const columns = [
  { title: '指标', width: 190, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: '2016年1月', dataIndex: 'value1', key: '1'},
  { title: '2016年2月', dataIndex: 'value2', key: '2' },
  { title: '2016年3月', dataIndex: 'value3', key: '3' },
  { title: '2016年4月', dataIndex: 'value4', key: '4' },
  { title: '2016年5月', dataIndex: 'value5', key: '5' },
  { title: '2016年6月', dataIndex: 'value6', key: '6' },
  { title: '2016年7月', dataIndex: 'value7', key: '7' },
  { title: '2016年8月', dataIndex: 'value8', key: '8' },
  { title: '2016年9月', dataIndex: 'value9', key: '9', fixed: 'right',
    width: 80 },
];

const areaColums = [
  {title: '指标', dataIndex: 'name', key: 'name', fixed: 'left', width: 190,},
  { title: '北京', dataIndex: 'value1', key: '1'},
  { title: '成都', dataIndex: 'value2', key: '2' },
  { title: '大连', dataIndex: 'value3', key: '3' },
  { title: '广州', dataIndex: 'value4', key: '4' },
  { title: '杭州', dataIndex: 'value5', key: '5' },
  { title: '昆明', dataIndex: 'value6', key: '6' },
  { title: '南京', dataIndex: 'value7', key: '7' },
  { title: '上海', dataIndex: 'value8', key: '8' },
  { title: '沈阳', dataIndex: 'value9', key: '9', fixed: 'right', width: 80 },
];

const data = [{
  key: '1',
  name: '销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '2',
  name: '会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '3',
  name: '新会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '4',
  name: '老会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '5',
  name: '首单350以上的新会员的销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}];


class CRMSale extends Component {
  constructor(props) {
      super(props);
  }
  state = {
    memberBackStartDate: startDate,
    memberBackEndDate: endDate,
    areaMemberBackStartDate: startDate,
    areaMemberBackEndDate: endDate,
    memberActivityStartDate: startDate,
    memberActivityEndDate: endDate,
    memberCustomerStartDate: startDate,
    memberCustomerEndDate: endDate,
  }
  componentWillMount() {
    this.initData();
  };
  onChange = (type, e) => {
    var currState = {
      [type]: e.target.value,
    };
    this.setState(currState);
  }
  // 获取数据
  fetchData(type, params){
    this.props.dispatch({
      type: type,
      payload: params
    });
  };
  fetchMemberBackData(){
    this.fetchData('CRMdata/memberBack', {
      startMonth: this.state.memberBackStartDate,
      endMonth: this.state.memberBackEndDate,
    });
  }
  fetchAreaMemberBackData(){
    this.fetchData('CRMdata/areaMemberBack', {
      startMonth: this.state.areaMemberBackStartDate,
      endMonth: this.state.areaMemberBackEndDate,
    });
  }
  fetchMemberActivityData(){
    this.fetchData('CRMdata/memberActivity', {
      startMonth: this.state.memberActivityStartDate,
      endMonth: this.state.memberActivityEndDate,
    });
  }
  fetchMemberCustomerData(){
    this.fetchData('CRMdata/memberCustomer', {
      startMonth: this.state.memberCustomerStartDate,
      endMonth: this.state.memberCustomerEndDate,
    });
  }
  initData(){
    this.fetchMemberBackData();
    this.fetchAreaMemberBackData();
    this.fetchMemberActivityData();
    this.fetchMemberCustomerData();
  };
  onDateChange(type, date, dateString) {
    type = type.replace('Type', '');
    let currState = {
      [type + 'StartDate']: dateString[0],
      [type + 'EndDate']: dateString[1],
    };
    this.setState(currState);
  };
  onAreaDateChange(date, dateString) {
    this.setState({
      areaStartDate: dateString[0],
      areaEndDate: dateString[1]
    });
  };
  memberBackOk(){
    this.fetchMemberBackData();
  };
  memberBackDownload(){
    this.exExcel(this.props.CRMdata.memberBackDownloadData, '会员累计回柜');
  };
  areaMemberBackOk(){
    this.fetchAreaMemberBackData();
  };
  areaMemberBackDownload(){
    this.exExcel(this.props.CRMdata.areaMemberBackDownloadData, '各地区会员累计回柜率');
  };
  memberActivityOk(){
    this.fetchMemberActivityData();
  };
  memberActivityDownload(){
    this.exExcel(this.props.CRMdata.memberActivityDownloadData, '会员活跃分析');
  };
  memberCustomerOk(){
    this.fetchMemberCustomerData();
  };
  memberCustomerDownload(){
    this.exExcel(this.props.CRMdata.memberCustomerDownloadData, '会员消费频次分布');
  };

  exExcel(downloadData, title){
      toExcel(downloadData.header, title, downloadData.data);
  };
  render(){
    const tips1 = (<Row>
        <Col span={6}>会员累计回柜</Col>
        <Col span={18} style={{textAlign:"right"}}><MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'memberBack')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/><Button type="primary" onClick={this.memberBackOk.bind(this)} className= {styles.searchOk}>确定</Button><Button type="primary" onClick={this.memberBackDownload.bind(this)} className= {styles.searchOk}>下载数据</Button></Col>
      </Row>);
    const tips2 = (<Row>
        <Col span={6}>各地区会员累计回柜率</Col>
        <Col span={18} style={{textAlign:"right"}}><MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'areaMemberBack')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/><Button type="primary" onClick={this.areaMemberBackOk.bind(this)} className= {styles.searchOk}>确定</Button><Button type="primary" onClick={this.areaMemberBackDownload.bind(this)} className= {styles.searchOk}>下载数据</Button></Col>
      </Row>);
    const tips3 = (<Row>
        <Col span={6}>会员活跃分析</Col>
        <Col span={18} style={{textAlign:"right"}}><MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'memberActivity')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/><Button type="primary" onClick={this.memberActivityOk.bind(this)} className= {styles.searchOk}>确定</Button><Button type="primary" onClick={this.memberActivityDownload.bind(this)} className= {styles.searchOk}>下载数据</Button></Col>
      </Row>);
    const tips4 = (<Row>
        <Col span={6}>会员消费频次分布</Col>
        <Col span={18} style={{textAlign:"right"}}><MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'memberCustomer')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/><Button type="primary" onClick={this.memberCustomerOk.bind(this)} className= {styles.searchOk}>确定</Button><Button type="primary" onClick={this.memberCustomerDownload.bind(this)} className= {styles.searchOk}>下载数据</Button></Col>
      </Row>);
  return (
    <MainLayout isShowLeft="showCRM">
        <div style={{marginTop:29}}>
                <Card title={tips1} style={{minHeight:300}}>
                      <BackChart data={this.props.CRMdata.memberBackChartData} loading={this.props.CRMdata.memberBackLoading} seriesName="月度销售额" width={"100%"} height={300} />
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.memberBackData.columns} dataSource={this.props.CRMdata.memberBackData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips2} style={{minHeight:220}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.areaMemberBackData.columns} dataSource={this.props.CRMdata.areaMemberBackData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips3} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.memberActivityData.columns} dataSource={this.props.CRMdata.memberActivityData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips4} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} loading={this.props.CRMdata.memberCustomerLoading} columns={this.props.CRMdata.memberCustomerData.columns} dataSource={this.props.CRMdata.memberCustomerData.data} scroll={{ x: 1300 }} />
                </Card>
        </div>
    </MainLayout>
  );
  }
};

CRMSale.propTypes = {
};

function mapStateToProps({ CRMdata }) {
  return {
    CRMdata: {...CRMdata},
  };
}

export default connect(mapStateToProps)(CRMSale);
